<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #container {
            width: 1038px;
            height: 650px;
            /* background-color: black; */
            background-image: url(img/bg.jpeg);
            margin: auto;
            position: relative;
            background-repeat: no-repeat
        }

        #map_panel {
            width: 631px;
            height: 421px;
            /* background-color: #ccc; */
            /* margin: auto; */
            position: absolute;
            left: 90px;
            top: 140px;
        }

        #map_bg {
            border-collapse: collapse;
        }

        #map_bg td {
            width: 20px;
            height: 20px;
            border: 1px solid #fff;
        }

        .snake {
            width: 20px;
            height: 20px;
            background-color: rgb(0, 255, 255);
            border: 1px solid #888;
            position: absolute;
            top: 64px;
        }

        .food {
            width: 20px;
            height: 20px;
            background-color: red;
            border: 1px solid #888;
            position: absolute;
        }

        #contral_panel {
            height: 550px;
            width: 196px;
            position: absolute;
            left: 800px;
            top: 140px;
        }

        #contral_panel button {
            margin-left: 20px;
            width: 178px;
            height: 52px;
            border-radius: 5%;
            background-color: #fff;
            margin-bottom: 20px;
        }

        #speed_panel {
            width: 186px;
            height: 146px;
            background-color: #fff;

        }

        #alert {
            width: 300px;
            height: 200px;
            background-color: #fff;
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -150px;
            border-radius: 10px;

        }

        .tishiyu {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            font-size: 20px;
            font-weight: 700;

        }

        .button_dis {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 30px;
        }

        .button_box {
            width: 70px;
            height: 25px;
            border-radius: 5%;
            background-color: #fff;
            margin-bottom: 20px;

        }

        #setting-box {
            width: 300px;
            height: 200px;
            background-color: #fff;
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -150px;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="map_panel">
            <table id="map_bg">
            </table>
        </div>
        <!-- 控制按钮 -->
        <div id="contral_panel">
            <div>
                <button id="btn_start">开始游戏</button>
            </div>
            <div>
                <button id="btn_setting">游戏设置</button>
            </div>
            <div>
                <button id="btn_back">退出</button>
            </div>
        </div>
        <div id="alert">
            <div class="tishiyu" id='tishiyu'> Game Over!</div>
            <div class="button_dis">
                <div>
                    <button id="re_start" class="button_box">再来一局</button>
                </div>
            </div>
        </div>
        <div id="setting-box">
            <div class="tishiyu"> 选择速度</div>
            <div class="button_dis">
                <div>
                    <button id="fast" class="button_box">快速</button>
                    <button id="midspeed" class="button_box">中速</button>
                    <button id="slow" class="button_box">慢速</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        /*
        
        设置
        */
        var speed = 300;
        var btnSetting = document.getElementById('btn_setting')
        btnSetting.onclick = function () {
            document.getElementById('setting-box').style.display = 'block'
        }
        var fast = document.getElementById('fast')
        var midspeed = document.getElementById('midspeed')
        var slow = document.getElementById('slow')
        fast.onclick = function () {
            speed = 100
            document.getElementById('setting-box').style.display = 'none'
        }
        midspeed.onclick = function () {
            speed = 300
            document.getElementById('setting-box').style.display = 'none'
        }
        slow.onclick = function () {
            speed = 1000
            document.getElementById('setting-box').style.display = 'none'
        }
        /*
        退出
        */
        var btnack = document.getElementById('btn_back')
        btnack.onclick = function () {
            window.history.back(-1);
        }
        /*
        再来一局
        */
        var reStart = document.getElementById('re_start')
        reStart.onclick = function () {
            document.getElementById('alert').style.display = 'none'
            location.reload();
        }
        /*
         //初始化地图
        */
        var omapTable = document.getElementById('map_bg')
        for (var row = 0; row < 20; row++) {
            var otr = document.createElement('tr');
            for (var col = 0; col < 30; col++) {
                var otd = document.createElement('td');
                otr.appendChild(otd);
            }
            omapTable.appendChild(otr);
        }

        /*
         //初始化蛇
        */
        var snakeArr = [];
        var omapPanel = document.getElementById('map_panel')
        for (var i = 2; i >= 0; i--) {
            var odiv = document.createElement('div')
            odiv.className = 'snake'
            odiv.style.left = i * 20 + (i + 1) + 'px'
            omapPanel.appendChild(odiv)
            odiv.pos = {
                left: i * 20 + (i + 1),
                top: 64
            }
            snakeArr.push(odiv) //为了让蛇动起来，数组中存divdom元素对象
        }

        /*
        //生成食物
        */
        var odivfood;

        function produceFood() {
            do {
                var flag = true;
                odivfood = document.createElement('div')
                odivfood.className = 'food'
                //食物定位不能出边框
                var iLeft = parseInt(Math.random() * 30) //0-29包含0
                iLeft = iLeft * 21 + 1
                var iTop = parseInt(Math.random() * 20)
                iTop = iTop * 21 + 1;
                odivfood.style.left = iLeft + 'px'
                odivfood.style.top = iTop + 'px'
                odivfood.pos = {
                    left: iLeft,
                    top: iTop
                }
                //食物iLeft不能与蛇的身体重合
                for (var i = 0; i < snakeArr.length; i++) {
                    if (snakeArr[i].offsetLeft == iLeft && snakeArr[i].offsetTop == iTop) {
                        flag = false
                    }
                }
                omapPanel.appendChild(odivfood)

            } while (!flag)

        }
        produceFood()

        /*
       点击开始游戏, 开始定时器,蛇移动
        */
        var timer;
        var direction = 'right'
        var startBtn
        var oStart = document.getElementById('btn_start')
        oStart.onclick = function () {
            startBtn = 'ok'
            if (!timer) {
                timer = setInterval(function () {
                    snakeMove()
                }, speed)
            }

        }
        /*
        键盘操控蛇转向
        */
        document.onkeydown = function (e) {
            e = e || window.event //处理兼容
            var key = e.which || e.keyCode
            console.log(key) //打印键盘码 上键盘38 右键39 左键37 下键40
            if (startBtn == 'ok') {
                if (key == 40) { //向下移动
                    if (direction != 'up') {
                        direction = 'down'
                    }
                } else if (key == 39) {
                    if (direction != 'left') {
                        direction = 'right'
                    }
                } else if (key == 38) {
                    if (direction != 'down') {
                        direction = 'up'
                    }
                } else if (key == 37) {
                    if (direction != 'right') {
                        direction = 'left'
                    }
                }
                snakeMove()
            }
        }
        /*
        蛇移动公共方法
        */
        function snakeMove() {
            var snakeHead = snakeArr[0]; //蛇头
            if (direction == 'down') { //向下移动
                snakeHead.style.top = snakeHead.offsetTop + 21 + 'px' //蛇头向下
            }
            if (direction == 'right') { //向右移动
                snakeHead.style.left = snakeHead.offsetLeft + 21 + 'px' //蛇头向右

            }
            if (direction == 'left') { //向左移动
                snakeHead.style.left = snakeHead.offsetLeft - 21 + 'px' //蛇头向右

            }
            if (direction == 'up') { //向上移动
                snakeHead.style.top = snakeHead.offsetTop - 21 + 'px' //蛇头向右

            }
            //以下是处理蛇身跟着蛇头动
            //蛇吃食物增长身体
            if (odivfood.offsetTop == snakeHead.offsetTop && odivfood.offsetLeft == snakeHead.offsetLeft) {
                odivfood.className = 'snake'
                odivfood.style.left = snakeHead.pos.left + 'px';
                odivfood.style.top = snakeHead.pos.top + 'px';
                snakeArr.splice(1, 0, odivfood);
                produceFood()
            } else {
                //身体向前一个移动
                for (var i = 1; i < snakeArr.length; i++) {
                    snakeArr[i].style.left = snakeArr[i - 1].pos.left + 'px'
                    snakeArr[i].style.top = snakeArr[i - 1].pos.top + 'px'
                }
            }
            //移动后位置更新
            for (var i = 0; i < snakeArr.length; i++) {
                snakeArr[i].pos.left = snakeArr[i].offsetLeft;
                snakeArr[i].pos.top = snakeArr[i].offsetTop;
            }
            //蛇吃自己
            var alertDiv = document.getElementById('alert');
            var container = document.getElementById('container');
            var tishiyu = document.getElementById('tishiyu');
            for (var i = 4; i < snakeArr.length; i++) {
                if (snakeArr[i].offsetTop == snakeHead.offsetTop && snakeArr[i].offsetLeft == snakeHead.offsetLeft) {
                    tishiyu.innerHTML = '嗡嗡嗡，大傻蛇吃到自己啦！'
                    container.appendChild(alertDiv);
                    alertDiv.style.display = 'block'
                    alertDiv.style.display =
                        clearInterval(timer);
                }
            }

            if (snakeHead.offsetTop == -20 || snakeHead.offsetTop == 421 || snakeHead.offsetLeft == -20 || snakeHead
                .offsetLeft == 631) {
                tishiyu.innerHTML = '撞墙啦，Game Over！'
                container.appendChild(alertDiv);
                alertDiv.style.display = 'block'
                alertDiv.style.display =
                    clearInterval(timer);
            }
        }
    </script>
</body>

</html>